<template>
	<div class="bread">
		<div class="breadcontent">
			<div class="breadbox">
				<div class="breaditem" v-for="item in $store.state.breadArr" :key="item.goods_id">
					<addCar v-if="$store.state.isclickcar">
						<template slot="cancel"><span @click="changeisclickcar">取消</span></template>
					</addCar>
					<router-link :to='"/goodscontent?id="|tool(item.goods_id)'>
						<img class="breaditemImg" :src="$store.state.url + item.goods_coverimg" />
						<h3 class="breadtext1">{{ item.goods_name }}</h3>
					</router-link>
					<h4 class="breadtext2">{{ item.goods_english }}</h4>
					<span class="breadprice">
						<div class="pricelement">￥</div>
						{{ item.goods_price }}
						<img class="priceImg" src="./images/car.png" @click="changeisclickcar(item.goods_id)">
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import addCar from "../ljy/addcar/addcar.vue"
	export default {
		components: {
			addCar
		},
		filters: {
			tool(n1, n2) {
				return n1 + n2
			}
		},
		data() {
			return {
				breadtext1: "xxxxx",
				breadtext2: "xxxxx",
				breadprice: "xxxx",
				arr: ""
			};
		},
		methods:{
			changeisclickcar(goods_id) {
			      this.$store.commit("changeGoodsid", goods_id);
			      this.$store.commit("changeIsclickcar");
			    },
		},
		async mounted() {
			// let res = await this.axios("/wrx/test")
			// console.log(this.$store.state.breadArr)
			// this.arr = res.data.ansor
			// console.log(22222222222)
			this.$store.commit('changeTypeNmame', 'bread')
		},
	};
</script>

<style scoped="scoped">
	* {
		text-decoration: none;
	}

	.bread {
		background-color: #ccc;
	}

	.breadcontent {
		width: 100%;
		margin: 0 auto 50px;
		background-color: #f8f8f8;
		padding-bottom: 80px;
		padding-top: 160px;
	}

	.breadbox {
		width: 1480px;
		margin: 0 auto 50px;
		/* height: 200px; */
		display: flex;
		flex-wrap: wrap;
	}

	.breaditem {
		width: 350px;
		padding-top: 20px;
		margin-left: 16px;
	}

	.breaditemImg {
		width: 350px;
		height: 350px;
		margin-bottom: 12px;
	}

	.breadtext1 {
		font-size: 15px;
		color: #000;
		margin-bottom: 6px;
		font-weight: 400;
	}

	.breadtext2 {
		font-size: 12px;
		color: #7a7a7a;
		height: 5px;
		margin-bottom: 10px;
		font-weight: normal;
		margin-bottom: 20px;
	}

	.breadprice {
		font-style: normal;
		font-size: 18px;
		font-weight: 500;
		position: relative;
		width: 100%;
		display: inline-block;
	}

	.pricelement {
		font-size: 15px;
		display: inline-block;
	}

	.priceImg {
		position: absolute;
		right: 32px;
		bottom: 0px;
		/* z-index: 10; */
	}
</style>
